<template>
  <div id="overtime_container" style="height: 98%">
    <el-card>
      <el-table :data="overtimeList" tooltip-effect="dark" style="width: 100%" border :header-cell-style="{ background: '#f2f2f2', color: '#606266' }">
        <el-table-column type="index" label="番号" width="50"></el-table-column>
        <el-table-column prop="osType" label="残業類別">
          <template #default="scope">
            <p v-if="scope.row.osType == 1" @click="overTimeDetail(scope.row.osGuid)" style="color: blue; cursor: pointer">正常残業</p>
            <p v-if="scope.row.osType == 2" @click="overTimeDetail(scope.row.osGuid)" style="color: blue; cursor: pointer">休日残業(週末)</p>
            <p v-if="scope.row.osType == 3" @click="overTimeDetail(scope.row.osGuid)" style="color: blue; cursor: pointer">祝祭日残業</p>
          </template>
        </el-table-column>
        <el-table-column prop="osFlg" label="残業できるか否か">
          <template #default="scope">
            <p v-if="scope.row.osFlg == '1'">はい</p>
            <p v-if="scope.row.osFlg == '0'">いいえ</p>
          </template>
        </el-table-column>
        <el-table-column prop="osBtime" label="残業開始時間"> </el-table-column>
        <el-table-column prop="osEtime" label="残業終了時間"> </el-table-column>
        <el-table-column prop="osSeconddayFlg" label="残業終了時間は翌日か否か">
          <template #default="scope">
            <p v-if="scope.row.osSeconddayFlg == '1'">はい</p>
            <p v-if="scope.row.osSeconddayFlg == '0'">いいえ</p>
          </template>
        </el-table-column>
        <el-table-column prop="osMealsFlg" label="食事時間を除くするか否か">
          <template #default="scope">
            <p v-if="scope.row.osMealsFlg == '1'">はい</p>
            <p v-if="scope.row.osMealsFlg == '0'">いいえ</p>
          </template>
        </el-table-column>
        <el-table-column prop="osMealsInterval" label="食事時間の間隔を除く(h)"> </el-table-column>
        <el-table-column prop="osMealsLong" label="食事時間を除く(h)"> </el-table-column>
        <el-table-column prop="osFeeFlg" label="残業代を計算するか否か">
          <template #default="scope">
            <p v-if="scope.row.osFeeFlg == '1'">はい</p>
            <p v-if="scope.row.osFeeFlg == '0'">いいえ</p>
          </template></el-table-column
        >
        <el-table-column prop="osFeeTime" label="残業代を計算する時間"> </el-table-column>
        <el-table-column prop="osFeeMultiple" label="残業代の倍数を計算する"> </el-table-column>
      </el-table>

      <!-- 分页部分 -->
      <div style="width: 100%; margin: auto">
        <el-pagination
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="requestOvertime.indexPage"
          :page-sizes="[8, 10, 15]"
          :page-size="requestOvertime.pageSize"
          layout="total,prev, pager, next, jumper"
          :total="total"
        >
        </el-pagination>
      </div>
      <el-dialog title="残業設置" v-model="editTimevisible" width="50%" :before-close="dialogBeforeClose">
        <table class="mytable" cellpadding="0" cellspacing="0">
          <tr class="mytr">
            <td class="mytd">会社の名前</td>
            <td class="mytd1" colspan="3">
              <el-select v-model="overtimeDetailObj.groupEnterpriseGuid" placeholder="選択してください" class="paperview-input-text" style="width: 100%">
                <el-option v-for="item in enteroptionInfo" :key="item.value" :value="item.value" :label="item.label"> </el-option>
              </el-select>
            </td>
          </tr>
          <tr class="mytr">
            <td class="mytd">残業類別</td>
            <td class="mytd1" colspan="3">
              <el-input
                v-model="overtimeDetailObj.osType"
                placeholder=""
                class="paperview-input-text"
                :value="overtimeDetailObj.osType === '1' ? '正常残業' : overtimeDetailObj.osType === '2' ? '休日残業(週末)' : '祝祭日残業'"
                readonly
              ></el-input>
            </td>
          </tr>
          <tr class="mytr">
            <td class="mytd">残業できるか否か</td>
            <td class="mytd1" colspan="3">
              &nbsp;&nbsp;&nbsp;
              <el-radio v-model="overtimeDetailObj.osFlg" label="1">はい</el-radio>
              <el-radio v-model="overtimeDetailObj.osFlg" label="0">いいえ</el-radio>
            </td>
          </tr>
          <tr class="mytr">
            <td class="mytd">残業開始時間</td>
            <td class="mytd1" colspan="3">
              &nbsp;
              <el-time-picker v-model="overtimeDetailObj.osBtime" value-format="HH:mm:ss" format="HH:mm:ss" placeholder="選択してください" class="paperview-input-text"> </el-time-picker>
            </td>
          </tr>
          <tr class="mytr">
            <td class="mytd">残業終了時間</td>
            <td class="mytd1" colspan="3">
              &nbsp;
              <el-time-picker v-model="overtimeDetailObj.osEtime" value-format="HH:mm:ss" format="HH:mm:ss" placeholder="選択してください" class="paperview-input-text"> </el-time-picker>
            </td>
          </tr>
          <tr class="mytr">
            <td class="mytd">残業終了時間は翌日か否か</td>
            <td class="mytd1" colspan="3">
              &nbsp;&nbsp;&nbsp;
              <el-radio v-model="overtimeDetailObj.osSeconddayFlg" label="1">はい</el-radio>
              <el-radio v-model="overtimeDetailObj.osSeconddayFlg" label="0">いいえ</el-radio>
            </td>
          </tr>
          <tr class="mytr">
            <td class="mytd">食事時間を除くするか否か</td>
            <td class="mytd1" colspan="3">
              &nbsp;&nbsp;&nbsp;
              <el-radio v-model="overtimeDetailObj.osMealsFlg" label="1">はい</el-radio>
              <el-radio v-model="overtimeDetailObj.osMealsFlg" label="0">いいえ</el-radio>
            </td>
          </tr>
          <tr class="mytr">
            <td class="mytd">累計</td>
            <td class="mytd1"><el-input v-model="overtimeDetailObj.osMealsInterval" placeholder="累計時間をご入力してください" class="paperview-input-text" maxlength="4"></el-input></td>
            <td class="mytd">一時間残業数(h)を除く</td>
            <td class="mytd1"><el-input v-model="overtimeDetailObj.osMealsLong" placeholder="残業時間を除いてご入力してください" class="paperview-input-text" maxlength="4"></el-input></td>
          </tr>
          <tr class="mytr">
            <td class="mytd">残業代を計算するか否か</td>
            <td class="mytd1" colspan="3">
              &nbsp;&nbsp;&nbsp;
              <el-radio v-model="overtimeDetailObj.osFeeFlg" label="1">はい</el-radio>
              <el-radio v-model="overtimeDetailObj.osFeeFlg" label="0">いいえ</el-radio>
            </td>
          </tr>
          <tr class="mytr">
            <td class="mytd">残業代を計算する時間</td>
            <td class="mytd1" colspan="3">
              &nbsp;
              <el-time-picker v-model="overtimeDetailObj.osFeeTime" value-format="HH:mm:ss" format="HH:mm:ss" placeholder="選択してください" class="paperview-input-text"> </el-time-picker>
            </td>
          </tr>
          <tr class="mytr">
            <td class="mytd">残業代の倍数を計算する</td>
            <td class="mytd1" colspan="3"><el-input v-model="overtimeDetailObj.osFeeMultiple" placeholder="残業代の倍数をご入力してください" class="paperview-input-text" maxlength="4"></el-input></td>
          </tr>
        </table>
        <div style="width: 100%; text-align: center; margin-top: 20px">
          <el-button type="primary" icon="el-icon-circle-check" @click="saveOverTime" v-preventReClick>保存</el-button>
        </div>
      </el-dialog>
    </el-card>
  </div>
</template>
<script>
export default {
  data() {
    return {
      overtimeList: [],
      overtimeDetailObj: {},
      enteroptionInfo: [],
      total: 0,
      requestOvertime: {
        indexPage: 1,
        pageSize: 10
      },
      editTimevisible: false
    }
  },
  created() {
    this.getOverTimeList()
  },
  methods: {
    // 监听 pagesize 改变的事件
    handleSizeChange(newSize) {
      // console.log(newSize)
      this.requestOvertime.pageSize = newSize
      this.searchVisited()
    },
    // 监听 页码值 改变的事件
    handleCurrentChange(newPage) {
      console.log(newPage)
      this.requestOvertime.indexPage = newPage
      this.searchVisited()
    },
    getOverTimeList() {
      this.axios.post('/overtimesetting/select/list', this.requestOvertime).then((res) => {
        console.log(res)
        this.overtimeList = res.data.data.list
        console.log(this.overtimeList)
        this.total = res.data.data.total
      })
    },
    overTimeDetail(id) {
      // 聲明對象
      function ObjStory(label, value) {
        this.label = label
        this.value = value
      }
      // 获取公司
      this.axios.post('/role/selectAllEnterprise').then((res) => {
        this.enteroptionInfo = []
        res.data.data.forEach((item) => {
          this.enteroptionInfo.push(new ObjStory(item.enterpriseName, item.groupEnterpriseGuid))
        })
      })
      this.axios.post('/overtimesetting/select', { osGuid: id }).then((res) => {
        console.log(id)
        console.log(res)
        this.overtimeDetailObj = res.data.data
      })
      this.editTimevisible = true
    },
    saveOverTime() {
      // if (
      //   this.overtimeDetailObj.osBtime === null ||
      //   this.overtimeDetailObj.osEtime === null ||
      //   this.overtimeDetailObj.osMealsInterval === '' ||
      //   this.overtimeDetailObj.osMealsLong === '' ||
      //   this.overtimeDetailObj.osFeeMultiple === '' ||
      //   this.overtimeDetailObj.osFeeTime === null
      // )
      //   return this.$message.warning('データが未記入')
        if (this.overtimeDetailObj.osBtime === null) return this.$message.warning('「残業開始時間」を選択してください')
        if (this.overtimeDetailObj.osEtime === null) return this.$message.warning('「残業終了時間」を選択してください')
        if (this.overtimeDetailObj.osMealsInterval === '') return this.$message.warning('「累計」をご入力してください')
        if (this.overtimeDetailObj.osMealsLong === '') return this.$message.warning('「一時間残業数を除く」をご入力してください')
        if (this.overtimeDetailObj.osFeeMultiple === '') return this.$message.warning('「残業代の倍数を計算する」をご入力してください')
        if (this.overtimeDetailObj.osFeeTime === null) return this.$message.warning('「残業代を計算する時間」を選択してください')
      if (this.overtimeDetailObj.osMealsInterval >= 100) return this.$message.warning('累計時間は100を超えてはならない')
      if (this.overtimeDetailObj.osMealsLong >= 100) return this.$message.warning('1時間の残業数(h)を除いて100を超えてはならない')
      if (this.overtimeDetailObj.osFeeMultiple >= 100) return this.$message.warning('残業代の倍数は100を超えてはならない')

      console.log(this.overtimeDetailObj)
      this.axios.put('/overtimesetting/update', this.overtimeDetailObj).then((res) => {
        if (res.data.success !== 1) return this.$message.error(res.data.msg)
        this.$message.success(this.$getMsg('I0002'))
        this.getOverTimeList()
        this.editTimevisible = false
      })
    }
  }
}
</script>

<style scoped>
:deep(.el-table--border .el-table__cell:first-child .cell) {
  text-align: center;
}
</style>
